<template>
	<view class="history">
		<index-header name="足迹"></index-header>
		<view class="history-list">
			<view class="history-text" v-show="show">您当前暂无历史浏览记录！</view>	
			<view class="guessLike">
				<view class="like-title" v-show="!show">历史记录</view>
				<view v-for="item in houseList" :key="item.id" class="like-content" @click="clickHouse(item)">
					<image class="houseImg" :src="item.imgs" style="width: 110px;height: 110px" ></image>
					<view class="like-content-right">
						<view class="like-content-info">
							<view class="name">
									{{item.name}}
							</view>
							<view class="range-area">
								<view class="range">
										{{item.range}}
								</view>
								<view class="area">
										{{item.area}}
								</view>
							</view>
							<view class="type-point">
								<view class="type">
										{{item.type}}
								</view>
								<view class="point">
										{{item.point}}㎡ 
								</view>
							</view>
							
						</view>
						<view class="like-price">
								{{item.price}}元/㎡ 起
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				houseList:[]
			}
		},
		onShow() {
			let arr=uni.getStorageSync("historyList")
			console.log(arr)
			if(arr.length==0){
				this.show=true;
			}else{
				this.show=false;//如果存在就不显示
				this.houseList=arr
			}
		
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	// 字体颜色
	@base:#32315B;
	// 背景颜色
	@backGround: #F4F3F8;
	.history{
		.history-list{
			.guessLike{
				.like-title{
					font-weight: bold;
					color:@base;
					font-size:18px;
					padding-left: 40rpx;
					height:40px;
					background-color: #fff;
					line-height: 40px;
					
				}
				.like-content{
					padding-left:20rpx;
					margin: 16px 0;
					display: flex;
					.like-content-right{
						display: flex;
						flex:1;
						justify-content: space-between;
						.like-content-info{
							margin-left:20px;
			
							.name{
								font-weight: bold;
							}
							.range-area{
								font-size:12px;
								display:flex;
								color:gray;
								padding: 8px 0 14px 0;
								.range{
									padding-right: 6px;
								}
							}
							.type-point{
								font-size:12px;
								display:flex;
								color:gray;
								.type{
									padding-right: 6px;
								}
							}
						}
						.like-price{
							padding-top: 20px ;
							margin-right: 10rpx;
							color: #f60;
							font-size: 14px;
						}
					}
					
				}
				
			}
		}
	}

	
</style>
